<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style>
		*{
			margin: 0;
			padding: 0;
		}

		ul{
			list-style: none;
		}

		.contents {
			width: 500px; 
			height: 300px;
			margin: 50px auto;
			overflow: hidden;
			position: relative;
		}
		
		.contents:hover span{
			display: block;
		}


		.contents li{	
			width: 500px; 
			height: 300px;		
			float: left;			
		}

		span{
			width: 50px;
			height: 40px;
			background-color: #ddd;
			cursor: pointer;
			display: none;
		}

		.next{
			position: absolute;
			right: 0;
			top: 50%;
			margin-top: -20px;
		}

		.prev{
			position: absolute;
			left: 0;
			top: 50%;
			margin-top: -20px;
		}

		.indx{
			width: 186px;
			height: 20px;
			position: absolute;
			bottom: 10px;
			left: 50%;
			margin-left: -93px;
		}

		.indx  a{
			width: 20px;
			height: 20px;
			display: inline-block;
			background-color: #fff;
			text-decoration: none;
			border: 1px solid #fff;
			border-radius: 10px;
			margin-left: 5px;
			text-align: center;
		}

		.red{
			color: red;
		}
	</style>
</head>
<body>


	<div class="contents">
		<ul>
			<li><img src="../img/1.jpg" alt=""></li>
			<li><img src="../img/2.jpg" alt=""></li>
			<li><img src="../img/3.jpg" alt=""></li>
			<li><img src="../img/4.jpg" alt=""></li>
			<li><img src="../img/5.jpg" alt=""></li>
			<li><img src="../img/6.jpg" alt=""></li>
		</ul>
		<span class="next"></span>
		<span class="prev"></span>
		<ol class="indx">
			<a href="javascript:;" class="red">1</a>
			<a href="javascript:;">2</a>
			<a href="javascript:;">3</a>
			<a href="javascript:;">4</a>
			<a href="javascript:;">5</a>
			<a href="javascript:;">6</a>
		</ol>
	</div>
	
	<script src="../lib/jquery-1.8.3.min.js"></script>
	<script>
		
		$(document).ready(function() {

			var $ul = $('.contents').find('ul'),
				$li = $ul.find('li'),
				len = $li.length,
				$width = $li.width(),
				$ulWidth = len * $width,
				cIndex = $('a.red').index();

			$ul.width($ulWidth);

			$('span').on('click', function() {
				var $this = $(this);
					

				if($('ul:animated').length < 0){
					return 
				}


				if($this.hasClass('next')){

					cIndex++;
					cIndex = (cIndex == len) ? 0 : cIndex;
					/*$ul.stop().animate({marginLeft : -$width},500 ,function() {
						$ul
							.append($ul.find('li:first()'))
							.css('margin-left', 0)
					});*/
					
				}else {

					cIndex--;
					if (cIndex < 0) {
						cIndex = len - 1;
					}

					/*$ul
						.prepend($ul.find('li:last()'))
						.css('margin-left', -$width)
					$ul.stop().animate({marginLeft: 0},500)*/

				}

				$('a').eq(cIndex).trigger('click');
			})

			$('a').on('click',function() {
				var $this = $(this),
					index = $this.index();
					
				$this.addClass('red').siblings().removeClass('red');				
				//$ul.stop().animate({marginLeft : -$width * index},500);
				$li.eq(index).fadeIn('800').siblings().hide();
				index++;
				$li.eq(index).fadeOut('300');
	
			})

			$('.contents')
				.on('mouseover',function() {
					clearInterval(setDong);
				})
				.on('mouseout',function() {
					runner()
				})


			function runner() {
				setDong = setInterval(function() {
					$('.next').trigger('click');
				},3000)
			}

			runner();			

		});

	</script>

</body>
</html>
